import { memo, FC } from 'react'
import useGetComponentInfo from '@/hooks/useGetComponentInfo'
import { ComponentPropsType, getComponentConfByType } from '@/components/Question'
import { useDispatch } from 'react-redux'
import { changeComponentProps } from '@/store/features/componentsReducer'

const NoProp: FC = () => {
  return <div style={{ textAlign: 'center' }}>未选中组件</div>
}

const ComponentProp = memo(() => {
  const dispatch = useDispatch()
  const { selectComponent } = useGetComponentInfo()
  if (selectComponent == null) return <NoProp />

  const { type, props, isLocked, isHidden } = selectComponent
  const componentConf = getComponentConfByType(type)
  if (componentConf == null) return <NoProp />
  const { PropComponent } = componentConf

  function changeProps(newProps: ComponentPropsType) {
    if (selectComponent == null) return
    const { fe_id } = selectComponent
    dispatch(changeComponentProps({ fe_id, newProps }))
  }

  return <PropComponent {...props} onChange={changeProps} disabled={isLocked || isHidden} />
})

export default ComponentProp
